<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <LINK href="resourses/style.css" rel="stylesheet" type="text/css">
   <title>Mariachi Casa</title>
   <style>
      body {
         background-image:url('pictures/chipsAndSalsa.jpg');
		 background-repeat:no-repeat;
      }
   </style>
</head>


<!-- ----------------------------------------------------------------------------- -->
<script>
function claimTicket(){
	window.open('claimTicket.html','claimTicket','resizable=no, titlebar=no, menubar=no, width=430, height=360, toobar=no');
}

function tipCalculator(){
	window.open('tipCalculator.html','tipCalculator','resizable=no, titlebar=no, menubar=no, width=430, height=360, toobar=no');
}

function useCoupon(){
	var coupon = prompt("Input Coupon Code:", "Coupon Code");
	//test for valid coupon code
	//if valid, edit ticket as needed
}

function paymentOptions(){
	window.open('paymentForm.html','paymentForm','resizable=no, titlebar=no, menubar=no, width=430, height=360, toobar=no');
}

function help(){
	alert("A waiter is on the way to help you.");
	/////send a note to the waiters that this tablet needs help
}

function refill(){
	//refill screen popup
	window.open('refillScreen.html','refillWindow','resizable=no, titlebar=no, menubar=no, width=430, height=360, toobar=no');
}
</script>
<!-- ----------------------------------------------------------------------------- -->


<body>
<!-- Back Button and Title -->
	<div id="backButton">
	<a href="mainMenu.html">
	<button class="backButton" onclick="mainMenu.html">Back</button>
	</a></div>
   

<!-- Left Side of the screen, lists the ordered items -->
	<div id="leftSidePayment">
	<table width="100%"  border="0" cellspacing="2" cellpadding="2" style="border-bottom: 1pt solid black">
		
		<!-- This will need to be dynamic! Get from da-->
		<tr style="font: 24pt Georgia; font-weight: bold; color: #333333">
		<td>Tablet</td>
		<td>Item</td>
		<td>Price</td>
		</tr>
		<tr>
            	<td>Tablet</td>
		<td>Item</td>
		<td>Price</td>
         	</tr>
		<tr>
            	<td>Tablet</td>
		<td>Item</td>
		<td>Price</td>
         	</tr>
      	</table>
	  
	<table width="100%"  border="0" cellspacing="2" cellpadding="2" style="border-bottom: 1pt solid black">
         	<tr>
            	<td style="font: 18pt Georgia; font-weight: bold; color:#333333">Subtotal:</td>
		<td>$    </td>
         	</tr>
		<tr>
            	<td style="font: 18pt Georgia; font-weight: bold; color:#333333">Tax</td>
		<td>$    </td>
         	</tr> 
		<tr>
            	<td style="font: 18pt Georgia; font-weight: bold; color:#333333">Tip</td>
		<td>$    </td>
        	</tr>
      	</table>
	  
	<table width="100%"  border="0" cellspacing="2" cellpadding="2">
        	<tr>
            	<td style="font: 18pt Georgia; font-weight: bold; color:#333333">Total:</td>
		<td>$    </td>
         	</tr>
      	</table>
   	</div>


<!-- Right side of the screen, lists the buttons -->
   	<div id="rightSidePayment">
      		<h3>You are currently using Tablet 1.</h3><br/><br/>
      		<button class="menuButton" onclick="claimTicket()">Claim A Ticket</button><br/><br/>
		<button class="menuButton" onclick="paymentOptions()">Pay Now</button><br/><br/>
		<button class="menuButton" onclick="useCoupon()">Coupons</button><br/><br/>
		<button class="menuButton" onclick="tipCalculator()">Add Tip</button>
   	</div>


<!-- Help and Refill buttons at the bottom. -->
	<div id="pageBottom">
	<button class="footerButton" onclick="help()">Help</button>
	<button class="footerButton" onclick="refill()">Refill</button>
	</div>
</body>
</html>
